<div class="importIdentValueModel" id="importRegionModel">
    <div class="layui-form-item">
        <p class="subinfo"></p>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" id="download-template">下载模板</button>
    </div>
    <div class="layui-form-item layui-form-text">
        <button id="file-btn-upload" class="layui-btn layui-btn-sm layui-btn-normal icon-btn">
            <i class="layui-icon">&#xe681;</i>上传文件
        </button>
        <p>只能上传xls/xlsx文件</p>

    </div>
    <form class="layui-form model-form layui-row">
        <div class="layui-inline layui-row">
            <label class="layui-form-label">数据选择</label>
            <div class="layui-input-block">
                <select name="sheetName" lay-verify="" id="sheetName-templ-box">
                </select>
            </div>
        </div>
        <div class="layui-inline layui-row pressBox">
            <label class="layui-form-label">上传进度</label>
            <div class="layui-input-block">
                <div id="slideImportRegion" class="demo-slider"></div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn layui-btn-sm" lay-filter="importRegionSubmit" lay-submit id="importRegionSubmit">确定</button>
        </div>
    </form>

</div>
<style>
    #slideImportRegion{
        width: 184px;
        height: 20px;
        display: inline-block;
        margin-top: 20px;
    }
    #importRegionModel .layui-row{
        margin-top: 10px;
    }

    #importRegionModel .layui-row .layui-form-label{
        padding-left: 0;
    }

    #importRegionModel .layui-row .layui-input-block{
        margin-left: 95px;
    }
    #importRegionModel  .pressBox{
        display: none;
    }
    #importRegionModel form{
        padding: 0;
    }
    #importRegionModel .text-right{
        margin-top: 25px;
    }
    #importRegionModel .subinfo{
        color: red;
        font-size: 12px;
        margin: 0;
        display: none;
    }

</style>
<script type="text/tmpl" id="sheetName-templ">
{{each sheet}}
    <option value="{{$value.name}}">{{$value.name}}</option>
{{/each}}
</script>

<script>
    layui.use(['layer', 'form', 'admin','upload','slider'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var upload = layui.upload;
        var Authorization = '';
        var slider = layui.slider;

        //获取权限方法
        var userInfo = getAuthority();
        var orgion_selectedCatalog = {};
        var uploadExcel = {};
        var ins1;
        window.inslideTime = null;

        form.render('select');
        if(userInfo){
            orgion_selectedCatalog = window.orgion_selectedCatalog;
            var access_token = localStorage.getExpire("access_token");
            var token_type = localStorage.getExpire("token_type");
            Authorization = token_type+" "+access_token;

            //定义初始值
            ins1 = slider.render({
                elem: '#slideImportRegion'
                ,theme: '#1E9FFF' //主题色
                ,change: function(value){
                    if(value == 100){
                        setTimeout(function () {
                            layer.msg('导入成功', {icon: 1});
                            window.importRegionIsOk = true;
                            admin.closeDialog('#importRegionModel');  // 关闭页面层弹窗
                        },500)
                    }
                }
            });
            if(orgion_selectedCatalog.importType!=0){//只有未在导入数据状态，才能上传
                $("#importRegionSubmit").addClass("ayui-btn-primary");
                $("#importRegionSubmit").attr("disabled","true");
                for(let i in regionUrl.config.importType){
                    if(orgion_selectedCatalog.importType == regionUrl.config.importType[i].value){
                        $("#importRegionModel .subinfo").css("display","inline-block");
                        $("#importRegionModel .subinfo").text(regionUrl.config.importType[i].name);
                    }
                }
                getRegionPress();
            }
        }

        $('#download-template').click(function () {
            var url = regionUrl.info.downloadTemplate;
            downloadTemplate(url);
        });

        //指定允许上传的文件类型
        upload.render({
            elem: '#file-btn-upload'
            ,url: regionUrl.info.uploadExcel
            ,accept: 'file' //普通文件
            ,exts: 'xls|xlsx' //只允许上传压缩文件
            ,headers: {Authorization: Authorization}
            ,done: function(res){
                if(res.message=="success"){
                    var data = res.data;
                    var str = template("sheetName-templ",data);
                    document.getElementById("sheetName-templ-box").innerHTML = str;
                    form.render('select')
                    uploadExcel = data;
                }

            }
            ,error: function(index, upload){
               console.log(index,upload)
            }
        });

        function downloadTemplate(url){
            let xhr = new XMLHttpRequest();
            xhr.open("GET", url, true); // 也可以使用POST方式，根据接口
            xhr.responseType = "blob"; // 返回类型blob，XMLHttpRequest支持二进制流类型
            xhr.setRequestHeader("Authorization", Authorization);
            xhr.onload = function() {
                if (this.status === 200) {
                    let blob = this.response; //使用response作为返回，而非responseText
                    let reader = new FileReader();
                    reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href
                    reader.onload = function(e) {
                        // 转换完成，创建一个a标签用于下载
                        let a = document.createElement("a");
                        a.download = "原始数据.xlsx";
                        a.href = e.target.result;
                        a.click();
                    };
                }
            };
            xhr.send();
        }

        form.on('submit(importRegionSubmit)', function (data) {
            console.log('data:',data)
            if(data.field.sheetName==null||data.field.sheetName==""){
                layer.msg('请先选择数据', {icon: 2});
                return false;
            }
            var req={
                fileName:uploadExcel.file,
                rcid:orgion_selectedCatalog.id,
                sheetName:data.field.sheetName
            }

            axios({
                method: 'POST',
                url:regionUrl.info.regionAnalysis,
                data:$.param(req),
                headers:{
                    'Authorization':Authorization
                }
            })
                .then(function (response) {
                    $("#importRegionSubmit").addClass("ayui-btn-primary");
                    $("#importRegionSubmit").attr("disabled","true");
                    getRegionPress();
                })
                .catch(function (error) {
                    console.log(error);
                    if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                        // 进行重新登陆
                        localStorage.clear();
                        top.location.href=loginPageUrl;
                    }
                    getRegionPress();
                });
            return false;
        });

        //获取进度条
        function getRegionPress() {
            let req = {
                rcid:orgion_selectedCatalog.id
            }
            axios.get(regionUrl.info.regionPress,{
                params:req,
                headers:{
                    'Authorization':Authorization
                }
            })
                .then(function (response) {
                    if(response.status == 200 &&response.data.message == "success"){
                        var data = response.data.data;
                        var str = data.replace("%", "");
                        //改变指定滑块实例的数值
                        $("#importRegionModel  .pressBox").css("display","inline-block");
                        ins1.setValue(Number(str));
                        $("#importRegionSubmit").removeClass("ayui-btn-primary");
                        $("#importRegionSubmit").attr("disabled","false");
                        if(data != "100.00%"){
                            window.inslideTime = setTimeout(function () {
                                getRegionPress();
                            },1000)
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                    if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                        // 进行重新登陆
                        localStorage.clear();
                        top.location.href=loginPageUrl;
                    }
                });
        }
    });
</script>